<template>
  <a-card :bordered="false" v-if="visible">
    <a-steps class="steps" :current="currentTab">
      <a-step title="填写资源表信息" />
      <a-step title="填写字段映射" />
      <a-step title="填写表设置" />
      <a-step title="完成" />
    </a-steps>
    <div class="content">
      <step1 v-if="currentTab === 0" :addData="addData"  :currSelectedType="currSelectedType" @nextStep="nextStep"/>
      <step2 v-if="currentTab === 1" :addData="addData"   @nextStep="nextStep" @prevStep="prevStep"/>
      <step-table-set v-if="currentTab === 2" :addData="addData"   @nextStep="nextStep" @prevStep="prevStep"/>
      <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
    </div>
  </a-card>
</template>

<script>
  import Step1 from './Step1'
  import Step2 from './Step2'
  import Step3 from './Step3'
  import StepTableSet from './StepTableSet.vue'
  import { getAction,postAction,putAction } from '@api/manage'

  export default {
    name: "StepForm",
    components: {
      Step1,
      Step2,
      StepTableSet,
      Step3
    },
    props: {
      // 声明接收名为currSelected的prop
      currSelectedType: {
        type: Object, // 根据实际数据类型定义
        required: true, // 如果这个prop是必需的，可以设置为true
      },
    },
    data () {
      return {
        tableId:0,
        description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
        currentTab: 0,
        visible:false,

        addData: {categoryId:this.currSelectedType.id,tableType:"FACT"},
        model:{},
        url: {
          addTable:"/dcloud-platform/api/datalibLogicTable/v1/add",
          editTbale:"/dcloud-platform/api/datalibLogicTable/v1/edit"
        }
      }
    },
    methods: {

      // handler
      nextStep (addModel) {
        if(this.currentTab ===  0){//填写资源表信息
          this.addData = addModel
          if(addModel.id === null || addModel.id === undefined){ //新增资源表
            postAction(this.url.addTable, addModel).then((res) => {
              if (res.success) {
                this.tableId = res.result
                this.addData["id"] = this.tableId
              }
            }).catch(err => {
              this.$message.error(err.message)
            });
          }else{
            putAction(this.url.editTbale, addModel).then((res) => {
              if (res.success) {
                 this.tableId = res.result
              }
            }).catch(err => {
              this.$message.error(err.message)
            });
          }

        }

        if(this.currentTab ===  1){//填写数据字段映射信息

        }

        if (this.currentTab < 3) {
          this.currentTab += 1
        }
      },
      edit(record){
          this.visible = true;
          this.addData = record;
      },
      add(){
        this.visible = true;
      },
      prevStep () {
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      finish () {
        this.currentTab = 0
      }
    }
  }
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>